<template>
  <view class="page_content header-bg">
    <!-- <view class=""></view> -->
    <view class="head_content">
      <CustomNavbar
        title="Add bank card"
        @rightClick="rightClick"
        rightText="Complete"
      ></CustomNavbar>

      <view class="content items">
        <!-- <view class="cell" @click="clickHandler('city')">
					<text class="title">Region</text>
					<view class="flex">
						<text
							style="font-weight: 400; color: rgb(218, 218, 218, 0.5); font-size: 27rpx; width: 300rpx; text-align: right;"
							class="over_text">{{form.cityName}}
						</text><u-icon class="ml-17" name="arrow-right"></u-icon>
					</view>
				</view> -->
        <view class="cell" @click="clickHandler('bank')">
          <text class="title">Bank selection</text>
          <view class="flex">
            <text
              style="
                font-weight: 400;
                color: rgb(218, 218, 218, 0.5);
                font-size: 27rpx;
                width: 300rpx;
                text-align: right;
              "
              class="over_text"
              >{{ form.bankName }} </text
            ><u-icon class="ml-17" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="content items">
        <view class="cell">
          <text class="title">phone</text>
          <view class="flex">
            <u-input
              input-align="right"
              border="none"
              v-model="form.phone"
              placeholder="Please enter"
              placeholder-style="text-align:right"
            ></u-input>
          </view>
        </view>
        <view class="cell">
          <text class="title">surname</text>
          <view class="flex">
            <u-input
              input-align="right"
              border="none"
              v-model="form.firstName"
              placeholder="Please enter"
              placeholder-style="text-align:right"
            ></u-input>
          </view>
        </view>
        <view class="cell">
          <text class="title">name</text>
          <view class="flex">
            <u-input
              input-align="right"
              border="none"
              v-model="form.lastName"
              placeholder="Please enter"
              placeholder-style="text-align:right"
            ></u-input>
          </view>
        </view>
        <view class="cell">
          <text class="title">Bank card number</text>
          <view class="flex">
            <u-input
              input-align="right"
              border="none"
              v-model="form.userBankNo"
              placeholder="Please enter"
              placeholder-style="text-align:right"
            ></u-input>
          </view>
        </view>
      </view>
      <u-popup
        bgColor="#484646"
        :round="10"
        :show="show"
        mode="bottom"
        :closeable="true"
        @close="closePop"
      >
        <view style="height: 64rpx"></view>
        <view class="pop_body">
          <view class="item" v-for="item in baseList" @click="selectItem(item)">
            {{ item.bankName || item }}
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      form: {
        cityName: '',
        bankId: '',
        bankName: '',
        userBankNo: '',
        userName: ''
      },
      show: false,
      showType: 'city',
      bankList: [],
      cityList: [],
      baseList: []
    }
  },
  onLoad() {
    this.load()
    this.getUserInfo()
  },
  computed: { ...mapGetters('user', ['token', 'userInfo']) },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    rightClick() {
      // uni.navigateBack({delta: 1})
      const data = {
        ...this.form,
        email: this.userInfo.phone
      }
      this.$request('user.addBank', data).then((res) => {
        console.log(res)
        uni.navigateBack({ delta: 1 })
      })
    },
    selectItem(item) {
      if (this.showType === 'city') {
        this.form.cityName = item
      } else {
        this.form.bankId = item.id
        this.form.bankName = item.bankName
      }
      this.closePop()
    },
    closePop() {
      this.show = false
      this.baseList = []
    },
    load() {
      this.$request('user.bankList', {
        nation: 'Thailand'
      }).then((res) => {
        this.bankList = res.data
      })
      this.$request('user.bankList', {
        nation: ''
      }).then((res) => {
        this.cityList = res.data
      })
    },
    clickHandler(e) {
      this.show = true
      this.showType = e
      if (e === 'city') {
        this.baseList = this.cityList
      } else {
        this.baseList = this.bankList
      }
    }
  }
}
</script>

<style>
.over_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop_body {
  height: 700rpx;
  overflow-y: scroll;
}

.pop_body .item {
  color: rgb(255, 255, 255, 0.5);
  padding: 24rpx 32rpx;
}

.pop_body .item::after {
  content: ' ';
  position: absolute;
  background-color: rgb(218, 218, 218, 0.4);
  bottom: 0;
  height: 1rpx;
  width: 90%;
}

.pop_body .item:active {
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.content {
  width: 688rpx;
  margin: 0 auto;
  margin-top: 34rpx;
}

.items {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 23rpx;
}

.items .cell {
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  position: relative;
  overflow: hidden;
}

.items .cell::after {
  content: ' ';
  position: absolute;
  background-color: rgb(218, 218, 218, 0.4);
  bottom: 0;
  height: 1rpx;
  width: 90%;
}
.items .cell:last-child::after {
  content: ' ';
  background-color: transparent;
}
.cell .title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 27rpx;
  color: #ffffff;
}

.color-white {
  color: white;
}
</style>
